<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
    <head>        
        <title>百市千县-报价方案设置</title>
        <!-- META SECTION -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" href="${ctx}/rs/css/bootstrap-table.css" />
        <link rel="stylesheet" href="${ctx}/rs/css/main.css" />
        <link id="theme" rel="stylesheet" href="${ctx}/rs/joli/css/theme-default.css" />
        <!-- EOF CSS INCLUDE -->               
        <style type="text/css">
			#quotationHead tr th{text-align: center;vertical-align: middle;border: 1px #E3E3E3 solid !important;}
			.table-cell{display: table-cell;}
		</style>                     
    </head>
<body>
	
	<!-- START PAGE CONTAINER -->
        <div class="page-container">
        	<!-- 引入左菜单部分 -->
            <jsp:include page="../joli/menu.jsp"></jsp:include>
            
            <!-- START PAGE CONTENT -->
            <div class="page-content">
                
                <jsp:include page="../joli/top.jsp"></jsp:include>
                
                <!-- START BREADCRUMB -->
                <ul class="breadcrumb">
                    <li><a href="#">FM广告管理</a></li>                    
                    <li class="active">报价方案管理</li>
                </ul>
                <!-- END BREADCRUMB -->   
                
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
                	<div class="row">
                		<div class="col-xs-12">
                			<div class="pageTab">
                				<a href="${ctx}/send.htm?page=bsqx_quotation/timeLevelList">时段级别设置</a>
                				<a href="${ctx}/send.htm?page=bsqx_quotation/durationList">广告时长设置</a>
                				<a href="${ctx}/bsqx/toQuotationList.htm" class="active">报价方案设置</a>
                			</div>
                			<hr style="margin-top: 5px;"/>
                			<div>
                				<div class="row">
                					<form id="form1" action="${ctx}/bsqxBid/save.htm" method="post">
                						<div class="row">
	                						<div class="form-group">
												<div class="col-sm-2 text-right p10">
													<span class="help-block" id="valierr" style="color:#FF9966">*</span>
													<span>方案名称：</span>
												</div>
												<div class="col-sm-3">
													<input type="text" class="form-control mt2" id="bidName" name="bidName" maxlength="20" placeholder="请输入方案名称"/>
												</div>
											</div>
										</div>
										
										<div class="row">
											<div class="form-group">
												<div class="col-sm-2 text-right p10">
													<span class="help-block" id="valierr" style="color:#FF9966">*</span>
													<span>方案说明：</span>
												</div>
												<div class="col-sm-5">
													<textarea rows="3" id="bidExplain" name="bidExplain" class="form-control" style="resize: none;" maxlength="200" placeholder="简单描述方案的定价缘由，便于广告用户知悉"></textarea>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="form-group">
												<div class="col-sm-2 text-right p10">
													<span class="help-block" id="valierr" style="color:#FF9966">*</span>
													<span>方案级别顺序：</span>
												</div>
												<div class="col-sm-2 p5_10">
													<select class="comp_select" style="width: 100%;" id="bidLevel" name="bidLevel">
														<option value="0">请选择</option>
														<option value="1">1</option>
														<option value="2">2</option>
														<option value="3">3</option>
														<option value="4">4</option>
														<option value="5">5</option>
														<option value="6">6</option>
														<option value="7">7</option>
														<option value="8">8</option>
														<option value="9">9</option>
														<option value="10">10</option>
													</select>
												</div>
											</div>
										</div>
										
										<div class="row">
											<div class="form-group">
												<div class="col-sm-2 text-right p10">
													<span class="help-block" id="valierr" style="color:#FF9966">*</span>
													<span>报价设置：</span>
												</div>
												<div class="col-sm-5 p10">
													<a onclick="toSetQuotation();">点我设置</a>
													<input type="text" style="width: 0px;height: 0px;border: 0px;" id="hid_quotation" name="quotations"/>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="form-group">
												<div class="col-sm-7 text-center">
													<a class="btn btn-default" onclick="valiSubmit();">添加</a>
												</div>
											</div>
										</div>
                					</form>
                					
                				</div>
                				<hr/>
							</div>
							<h5 class="unableTxt">方案列表</h5>
							<table id="quotationHead" class="table table-bordered" style="margin-bottom: -10px">
								<thead>
									<tr>
										<th rowspan="2" class="col-md-2">方案名称</th>
										<th rowspan="2" class="col-md-2">方案级别序号<br>(序号越小方案越优越)</th>
										<th rowspan="2" class="col-md-1">时段名称</th>
										<th colspan="${fn:length(durationList)}" class="col-md-5">广告报价(元/次)</th>
										<th rowspan="2"  class="col-md-2">操作</th>
									</tr>
									<tr>
										<c:forEach items="${durationList}" var="item">
											<th data-valign="middle" data-align="center">${item.value}秒</th>
										</c:forEach>
									</tr>
								</thead>
							</table>
							<table id="table" cellpadding="0" cellspacing="0" data-toggle="table" data-toolbar="#toolbar"
								data-url="${ctx}/bsqxBid/getPage.htm"
								data-cache="false"
								data-pagination="true" 
								data-show-header="false"
								data-side-pagination="server"
								data-page-list="[10, 20, 50, 100]"
								data-page-size="20"  
								data-response-handler="resHandler"
								data-query-params="queryParams">
								<thead>
									<th data-field="bidName" class="col-md-2" data-valign="middle">方案名称</th>
									<th data-field="bidLevel" class="col-md-2" data-valign="middle">方案级别序号<br>(序号越小方案越优越)</th>
									<th data-field="quotationRelations" data-formatter="relationFormatter" class="col-md-6" style="padding: 0px;" data-valign="middle">广告报价(元/次)</th>
									<th data-field="action"data-formatter="actionFormatter" class="col-md-2" data-valign="middle">操作</th>
								</thead>
							</table>
                		</div>
             		</div>
            	</div>
		</div>
	</div>
		
	<!-- 引入所有joli的脚本 -->
	<jsp:include page="../joli/scripts.jsp"></jsp:include>
	<!-- 引入页面需要的脚本 -->
	<script type="text/javascript" src="${ctx}/rs/js/bootstrapQ.min.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table.js"></script>
	<script src="${ctx}/rs/js/bootstrap-table-zh-CN.js"></script>
	<script src="${ctx}/rs/js/jquery.formatDate.js"></script>
	<script src="${ctx}/rs/js/my97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${ctx}/rs/js/session-out-error.js"></script>
	<script src="${ctx}/rs/js/jquery.validate.min.js"></script>
	<script src="${ctx}/rs/js/jquery.form.js" type="text/javascript"></script>
	<script src="${ctx}/rs/js/messages_zh.min.js"></script>
	
	<script>
	  activeMenu($("#menu_fmgggl_1"));
	  
	  /* 新增操作验证start */
	  //初始化验证 start
	  //自定义验证
	    $.validator.addMethod("selectRequired", function(value, element) {
	    	value = $(element).val();
	    	var flag = (value!=null&&value!=undefined&&value>0);
	    	return true&&flag;
	    }, "必须填写");
	  
		var form = $('#form1');
		form.validate({
			rules : {
				bidName: {
					required: true,
					maxlength: 20
				},
				bidExplain: {
					required: true,
					maxlength: 200
				},
				bidLevel: {
					selectRequired : true
				},
				quotations: {
					required: true
				}
				
			},
			messages : {
				quotations: {
					required: "请设置报价"
				}
			},
			highlight : function(element) {
				$(element).closest('.form-group').removeClass('success').addClass(
						'error');
			},
			success : function(element) {
				element.text('OK!').addClass('valid').closest('.form-group')
						.removeClass('error').addClass('success');
			}
		});
		
		function valiSubmit() {
			if (form.valid()) {
				var options = {
						dataType : "json",
						beforeSubmit : function() {
							$(".unable").show();
						},
						success : function(result) {
							if(!$('.unable').is(':hidden')){
								$(".unable").hide();
							}
							if ((typeof result == 'boolean') && result) {
								// 普通消息提示条
								bootstrapQ.msg({
									msg : '保存成功！',
									type : 'success',
									time : 2000
								});
								refresh();
							} else if(typeof result == 'boolean') {
								bootstrapQ.msg({
									msg : '保存失败！',
									type : 'danger',
									time : 2000
								});
							}else{
								bootstrapQ.msg({
									msg : result,
									type : 'danger',
									time : 2000
								});
							}
						},
						error : function(result) {
							if(!$('.unable').is(':hidden')){
								$(".unable").hide();
							}
							bootstrapQ.msg({
								msg : "保存失败！",
								type : 'danger',
								time : 2000
							});
						}
					};
					form.ajaxSubmit(options);
					return false;
			}
		}
		
	/* 表单验证end */
	  
	  var $table = $('#table');
      
      $table.on('click-row.bs.table', function (e, row, $element) {
	    	$table.bootstrapTable('uncheckAll');
	    	$table.bootstrapTable('check', $element.index());
      });
      
      $table.on('load-success.bs.table', function (e, row, $element) {
	  	  $(".bidExplain").bstip({
	  	    html    : true,
	  	    placement   : 'top',
	  	    trigger : 'hover'
  		  });
  	  });
      
      $table.bootstrapTable({
          height: getHeight()
      });
	    
      //获取分辨率高度
	    function getHeight() {
	        return window.screen.height - 408;
	    }
	    
	    $(window).resize(function () {
      	$table.bootstrapTable('resetView',{height: getHeight()});
      });
	    
	    //初始化刷新
	     function refresh(pageIndex,selectPage){
	    	if(!pageIndex && !selectPage){
	    		pageIndex = 0;
	    		selectPage = 0;
	    	}
			var pageSize = $table.bootstrapTable('getOptions').pageSize;
			pageIndex=pageIndex*pageSize;
	    	$table.bootstrapTable('refresh', {
	    		silent: true,
	    		cache : false,
	    		url: '${ctx}/bsqxBid/getPage.htm',
                query: {
	   				pageIndex : pageIndex,
	   				pageSize : pageSize
	   			}
           });
	    	$table.bootstrapTable('selectPage', selectPage);
	    }
	    
	    function add() {
	    	var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			bootstrapQ.dialog({
				url : '${ctx}/user/add.htm',
				title : '新增图文资讯',
				width : "750px",
				scrolly : "true",
				bheigth : "430px",
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				$("#bsmodal").modal("hide");
				refresh(pageIndex,pageNumber);
			});
		};
		
		function edit() {
			var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
			var pageIndex = pageNumber - 1;
			var rows = $table.bootstrapTable('getSelections');
			if (rows.length == 1) {
				bootstrapQ.dialog({
					url : "${ctx}/user/edit.htm?id="+ rows[0].id,
					title : "编辑图文资讯",
					width : "750px",
					scrolly : "true",
					bheigth : "430px",
					close : 'true',
					hidebtn : 'true'
				},function(){
					//回调触发关闭窗口
					$("#bsmodal").modal("hide");
					refresh(pageIndex,pageNumber);
				});
			}else{
				bootstrapQ.alert("请选中一条记录");
			}
       }
		
		function removeData(id) {
		   var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
		   var pageIndex = pageNumber - 1;
		   var rows = $table.bootstrapTable('getSelections');
		   var len=$("#table tbody").find("tr").length;
	       if(len==rows.length){
		        pageIndex = pageIndex - 1;
		   }
           if(id||rows.length > 0){
           	bootstrapQ.confirm('确定删除选中记录？',function(){
           		var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                       return row.id;
                   });
           		ids = id?[id]:ids;
                   $.ajax({
                	   url: "${ctx}/bsqxBid/delete.htm?bidId="+id,
                       success: function (text) {
                       	bootstrapQ.msg({
    						    msg  : '删除成功！',
    						    type : 'success',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       },
                       error: function () {
                       	bootstrapQ.msg({
    						    msg  : '删除失败！',
    						    type : 'danger',
    						    time : 2000
    						});
                       	refresh(pageIndex,pageNumber);
                       }
                   });
   			},null);
           }else{
           	bootstrapQ.alert("请选择要删除的记录！");
           }
       }
		
	    function queryParams(params) {
			return {
				pageIndex : params.offset,
				pageSize : params.limit
			};
		}
		
	    function relationFormatter(value, row, index){
	    	var tList = ${timeLevelStr};
	    	var dlength = "${fn:length(durationList)}";
	    	var pList = value;
	    	var res = "";
	    	$.each(tList, function(i,item){
	    		var html = '<table style="width: 100%">'
	    			+'<tr>'
	    			+'	<td style="width: 16.7%;">'+item.value+'</td>'
	    			+'	<td style="width: 83.2%;">'
					+'		<table>'
					+'			<tr>';
					var tw = Math.round(100/dlength);
					$.each(pList,function(j,item2){
		    			if(item2.timeLevelId == item.id){
			    			html += '<td style="width: '+tw+'%">'+item2.price+'</td>';
		    			}
		    		});
					html+='		</tr>'
					+'		</table>'
	    			+'	</td>'
	    			+'</tr>'
	    			+'</table>';
	    		
	    		/* var html = '<div style="display: table-row;width: 100%;">';
	    		html += '<div style="width: 20%;" class="table-cell">'+item.value+'</div>';
	    		html += '<div style="width: 80%;" class="table-cell">'
	    			+ '<div style="display: table;">'
	    			+ '<div style="display: table-row;width: 100%;">';
	    		$.each(pList,function(j,item2){
	    			if(item2.timeLevelId == item.id){
		    			html += '<div class="table-cell">'+item2.price+'</div>';
	    			}
	    		});
	    		html += '</div></div></div>';
	    		html += '</div>'; */
	    		res += html;
	    	});
	    	return res;
	    }
	    
		function actionFormatter(value, row, index){
			return '<a class="mr15" href="javascript:removeData('+row.bidId+')">删除</a>'
				+'<a class="bidExplain" title="'+row.bidExplain+'">查看方案说明</a><br/>'
				+'<a href="javascript:updateTimeRange('+row.bidId+');">编辑播出时段</a>';
		}
		
		function updateTimeRange(id){
			if(!id){
				bootstrapQ.msg({
					msg: '参数不全！',
					type: 'danger',
					time: 2000
				});
				return;
			}
			bootstrapQ.dialog({
				title: '设置播出时间段位',
				url: '${ctx}/bsqxBidTimePoint/toUpdateTimeRange.htm?bidId='+id,
				width : "600px",
				scrolly : "true",
				bheigth : "500px",
				close : 'true',
				hidebtn : 'true'
			},function(){
				//回调触发关闭窗口
				refresh();
				return true;
			});
		}
		
		function toSetQuotation(){
			bootstrapQ.dialog({
				title: '请设置报价',
				url: '${ctx}/bsqx/toSetQuotation.htm',
				width: '700px',
				bheight: '400px',
				close : 'true',
				hidebtn : 'true'
			}, function(){
				return true;
			});
		}
		
	</script>
</body>
</html>